<template>
  <div class="draws" @scroll="loadMore">
    <div class="draws-content" v-for="item in draws" :key="item.id">

      <div class="user-info">
        <img :src="`https://ss.lanqb.com/${item.profile.avatar}`" alt="">
        <h4>{{item.profile.nickname}}</h4>
      </div>

      <div class="cover-img">
        <img :src="`https://ss.lanqb.com/${item.works.url}`" alt="">
      </div>

      <div class="draws-actions">
        <span>♥  {{item.works.coming}}</span>
        <span>♥  {{item.statistics.comment_num}}</span>
        
        <span>♥  {{item.statistics.activity_like_num}}</span>
      </div>

    </div>
    <div v-show ="isShow"  style="margin-top:20px; text-align:center">加载中...
    </div>
  </div>
</template>

<script>
export default {
  name: "CommunityDraw",

  data() {
    return {
      draws: [],
      isShow:true,
      curPage:1,
    };
  },

  methods: {
    loadMore(e){
      // console.log("---",e.target.scrollTop);
      if(e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight){
        console.log("11111");
        this.curPage++;
        this.isShow = true;
        fetch(`https://m.lanqb.com/api/works?type=3&page=${this.curPage}`)
        .then(res=>res.json())
        .then(data =>{
          this.draws = [...this.draws,...data.data];
          console.log(this.draws);
          this.isShow = false;
        })
      }
    }
  },
  created() {
    fetch("https://m.lanqb.com/api/works?type=3&page=1")
      .then((res) => res.json())
      .then((data) => {
        this.draws = data.data;
        console.log(this.draws);
      });
  },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.draws{
  height: calc(100vh - 48px - 44px - 108px);
  overflow-y: scroll;
  .draws-content{
     width: 90%;
  padding:20px;
  border-bottom:3px solid #eee ;
    .user-info{
      display: flex;
      align-items: center;
      img{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 10px;
      }
      h4{
        color: #3f4345;
      margin-left: 10px;
      }
    }

    .cover-img{
      padding: 20px 0;
     img{
       width: 300px;
       height: 300px;
     }
    }
    .draws-actions{
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
